<template>
	<com-list
	:bounce="bounce"
	class="com-swiper-list y-flex-1"
	data-id="com-swiper-list"
	:cell-top-show="false"
	:refreshImage="refreshImage"
	:pulldownable="pulldownable"
	:offsetAccuracy="offsetAccuracy"
	:enable-scroll-event="enableScrollEvent"
	ref="comSwiperList"
	@scroll="handleScroll"
	@pulldown="handlePulldown">
		<template v-if="isShow">
			<cell>
				<slot name="top"></slot>
			</cell>
			<header>
				<view class="y-flex" :style="{
					'height': listHeight + 'px',
				}">
					<slot name="header"></slot>
					<slot name="content">
						<com-tabs-list
						:tabsShow="tabsShow"
						:current="currentSync"
						:column="column"
						:bg-color="bgColor"
						:text-color="textColor"
						:border-color="borderColor"
						:selected-color="selectedColor"
						:data="data"
						:enable-swiper="enableSwiper"
						@change="handleTabsChange">
							<template v-slot="{swiper, i}">
								<slot :swiper="swiper" :i="i"></slot>
							</template>
						</com-tabs-list>
					</slot>
				</view>
			</header>
		</template>
	</com-list>
</template>

<script>
	import { unitpixel, getRect, getChildrens } from '@/assets/js/util.js'
	export default {
		props: {
			data: {
				type: Array,
				default () {
					return new Array
				}
			},
			current: {
				type: Number,
				default: 0
			},
			column: {
				type: [Number, String],
				default: 'auto'
			},
			textColor: {
				type: String,
				default: '#333333'
			},
			selectedColor: {
				type: String,
				default: '#2196F5'
			},
			borderColor: {
				type: String,
				default: '#eee'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			enableSwiper: {
				type: Boolean,
				default: true
			},
			top: {
				type: [String, Number],
				default: 0
			},
			enableScrollEvent: {
				type: Boolean,
				default: false
			},
			bounce: {
				type: Boolean,
				default: true
			},
			offsetAccuracy: {
				type: Number,
				default: 10
			},
			tabsShow: {
				type: Boolean,
				default: true
			},
			refreshImage: {
				type: String,
				default: '/static/refresh1.gif'
			},
			//开启下拉刷新
			pulldownable: {
				type: Boolean,
				default: false
			},
			enableSwiper: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			listHeight () {
				return this.windowHeight - unitpixel(this.top)
			},
			scrollEvent () {
				return this.enableScrollEvent ? 'scroll' : 'unbindScroll'
			}
		},
		data () {
			return {
				isShow: false,
				currentSync: 0
			}
		},
		created () {
			this.currentSync = this.current
		},
		mounted () {
			this.$nextTick(function () {
				setTimeout(() => {
					this.refresh()
				}, 50)
			})
		},
		methods: {
			refresh () {
				getRect('.com-swiper-list', this.$refs.comSwiperList, this).then(res => {
					this.windowHeight = res.height
					this.$nextTick(function () {
						this.isShow = true
					})
				})
			},
			setSpecialEffects () {
				let childrens = getChildrens('ComList, ComSwiperList', this)
				childrens = childrens.slice(1)
				const index = this.enableSwiper ? this.currentSync : 0
				childrens.length > 0 && childrens[index].setSpecialEffects({id:"com-swiper-list"});
			},
			pulldownSuccess () {
				this.$refs.comSwiperList && this.$refs.comSwiperList.pulldownSuccess()
			},
			handleScroll (e) {
				this.$emit('scroll', e)
			},
			handlePulldown (callback) {
				this.$emit('pulldown', callback)
			},
			handleTabsChange (e) {
				this.currentSync = e.current
				this.$nextTick(function () {
					this.$emit('change', { current: this.currentSync })
					this.$emit('update:current', this.currentSync)
					setTimeout(() => {
						this.setSpecialEffects()
					}, 50)
				})
			}
		},
		watch: {
			current (newVal) {
				if ( newVal != this.currentSync ) {
					this.currentSync = newVal
				}
			}
		}
	}
</script>

<style>
</style>